// 编辑的事件

// 需要用到tbody，所以在select.js里，要将tbody定义为全局变量才能在这里拿到
// console.log(tbody);

// 事件委托
tbody.addEventListener("click",function(e){
	// 获取事件源,这里不考虑兼容
	const target = e.target;
	// classList类数组,Array.from()转化为真正的数组
	const classes = Array.from(target.classList);
	
	// 先找到点击的这一行
	const tr = target.parentNode.parentNode;
	
		// ES6的includes方法  --Array.prototype.includes()
			// 用来判断一个数组是否包含一个指定的值，包含返回true，否则返回false
	// btn-edit 编辑
	if(classes.includes("btn-edit")){
		
		// classList 的方法有add()添加一个class和remove()移除一个class
		tr.classList.add("edit");
		
		// 把对应span的信息放入input的value
		var aSpans = tr.querySelectorAll("span");
		
		// 方法一、
		// var aInput = tr.querySelectorAll("input");
		// for(var i=0;i<aSpans.length;i++){
		// 	aInput[i].value = aSpans[i].innerHTML;
		// }
		
		// 方法二、
		// 类数组对象也有自己的forEach()方法
		aSpans.forEach(span => {
			// input是span的下一个兄弟元素nextSibling
			span.nextSibling.value = span.innerHTML;
		})
		
	}else if(classes.includes("btn-ok")){
		// 确定
			// 把修改之后的数据发送给后端，成功之后再修改前端
			// 获取tr上的自定义属性 
			// 当删除后台部分数据时，不会使前端的编号跟着空缺删除的id，为了用户体验更好，需要始终是从1开始的自然数
			// 并且为了增删改查的操作，还是要记录id的值，使用自定义属性
			
		// 获取自定义属性getAttribute
		// console.log(tr.getAttribute("data-id"));//拿到数据库的实际id值
		
		const id = tr.getAttribute("data-id");
		const name = tr.querySelector(".inputName").value;
		const price = tr.querySelector(".inputPrice").value;
		const num = tr.querySelector(".inputNum").value;
		
		utils.fetch('./api/info/update.php', { id,name,price,num }).then( resp => {
			
			if(resp.code === 200){
				// 更新成功
				tr.classList.remove("edit");
				// 把input的value给对应的input
				var aSpans = tr.querySelectorAll("span");
				aSpans.forEach(span => {
					// input是span的下一个兄弟元素nextSibling
					span.innerHTML = span.nextSibling.value;
				})
			}
			
		})
	}else if(classes.includes("btn-cancel")){
		// 取消
		tr.classList.remove("edit");
	}else if(classes.includes("btn-del")){
		
		// 删除
		// 先从数据库里根据id进行删除，再重新请求数据，因为如果只是移除当前行，序号会有不连续问题
		const id = tr.getAttribute("data-id")
	
		utils.fetch('./api/info/del.php', { id }).then( resp => {
			if(resp.code === 200){
				// 删除成功 --重新请求
				getData();
			}
			
		})
	}
	
	
	
	
	
	
	
	
		
});




